<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h1>我是父组件部分</h1>
    <hr>
    <zi-com :fudata="fdata" :fu-arr="list" :age="myage" :sex="mysex"></zi-com>
    <hr>
    <zi-com :fudata="'啥也不是'" :fu-arr="mylist" :age="myage" :sex="mysex"></zi-com>
    <button @click="change">变性手术</button>
  </div>
  <!-- 子组件模板部分------------------ -->
  <template id="zi">
    <div>
      <h1>我是子组件内容部分</h1>
      <h1>{{fudata}}</h1>
      <ul>
        <li v-for="(item,index) in fuArr">{{item}}项</li>
      </ul>
      <h1>{{age}}</h1>
      <h1>{{sex}}</h1>
    </div>
  </template>
  <script src="./vue.js"></script>
  <script>
    // 父组件像子组件传参 用props传递
    //子组件定义的props  父组件在调用子组件时候用v-bind像props传参

    //vue的单向数据流
    //  所有的 props 都使得其父子 props 之间形成了一个单向下行绑定：父级 props 的更新会向下流动到子组件中，
    //但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

    // 额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。
    //这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
    var vm = new Vue({
      el: "#app",
      data() {
        return {
          fdata: "父组件的数据",
          list: [1, 2, 3],
          myage: 88,
          mylist: ["吃", "喝", "乐"],
          mysex: "女"
        }
      },
      methods: {
        change() {
          this.mysex = "人妖";
        }
      },
      components: {
        ziCom: {
          template: "#zi",
          // props: ["fudata", "fuArr"],
          props: {
            fudata: String,  //规定了props传来的数据类型
            fuArr: Array,  //规定fuArr的props 必须传递数组类型
            age: {
              type: Number,
              required: true//必传
            },
            sex: {
              type: String,
              // required: true,
              default: "男"
            }
          },
          data() {
            return {
              zidata: "子组件的数据"
            }
          },
          mounted() {
            // 自组件内不要改变父组件传递来的数据的props
            // this.fudata = "你好"
          },
          methods: {
            say() {

            }
          },
        }
      }
    })





  </script>
</body>

</html>